<script>
import { api } from '@/api'
import { chat } from '@/chat'
import { startRecord, stopRecord } from '@/chat/call'
import { Button } from 'vant'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    Button
  },
  computed: {
    isGroup() {
      return this.$route.params.username?.startsWith('@TGS$')
    }
  },
  data() {
    return {
      recording: false,
      seconds: 0,
      timer: null,
      tempVoice: null,
      playing: false,
      chunks: []
    }
  },
  watch: {
    value() {
      if (this.value === false) {
        this.pause()
      }
    }
  },
  methods: {
    async start() {
      if (this.recording) return
      await startRecord()
      this.recording = true
      this.seconds = 0
      this.timer = setInterval(() => {
        this.seconds++
      }, 1000)
    },
    async stop() {
      this.chunks = await stopRecord()
      this.recording = false
      clearInterval(this.timer)
      this.timer = null
      this.tempVoice = URL.createObjectURL(new Blob(this.chunks))
    },
    play() {
      this.$refs.audio.play()
      this.playing = true
    },
    pause() {
      this.$refs.audio.pause()
      this.playing = false
    },
    remove() {
      this.seconds = 0
      URL.revokeObjectURL(this.tempVoice)
      this.tempVoice = null
      this.chunks = []
      this.pause()
    },
    handleEnded(e) {
      e.target.currentTime = 0
      this.playing = false
    },
    async send() {
      URL.revokeObjectURL(this.tempVoice)
      this.tempVoice = null
      this.seconds = 0
      const wav = new Blob(this.chunks, { type: 'audio/wav' })
      const voiceFile = new File([wav], `${Date.now()}.wav`, { type: 'audio/wav' });
      const { url } = await api.upload(voiceFile)

      chat.sendMessage({
        to: this.userInfo.user_name,
        type: 'voice',
        msg: url,
        isGroup: this.isGroup
      })
      this.$emit('sended')
    }
  },
}
</script>

<template>
  <div v-show="value" class="voice-panel">
    <div
      class="status"
      :class="{
        'recording': recording
      }"
      @click="recording ? stop() : start()"
    >
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path fill="currentColor" d="M23 14v3a7 7 0 0 1-14 0v-3H7v3a9 9 0 0 0 8 8.94V28h-4v2h10v-2h-4v-2.06A9 9 0 0 0 25 17v-3Z"/>
        <path fill="currentColor" d="M16 22a5 5 0 0 0 5-5V7a5 5 0 0 0-10 0v10a5 5 0 0 0 5 5"/>
      </svg>

      <div class="time">00:{{ String(seconds).padStart(2, '0') }}</div>
    </div>

    <audio ref="audio" :src="tempVoice" @ended="handleEnded"></audio>

    <div class="acions" v-if="tempVoice">
      <Button @click="remove">删除</Button>
      <Button v-if="tempVoice" @click="playing ? pause() : play()">{{ playing ? '暂停' : '播放' }}</Button>
      <Button @click="send">发送</Button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.voice-panel {
  height: 200px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  .status {
    border-radius: 50%;
    border: 5px solid #eeeeee;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .icon {
    width: 48px;
    height: 48px;
    color: #63c178;
  }

  .time {
    font-size: 10px;
    font-weight: bold;
    color: eeeeee;
  }

  .acions {
    display: flex;
    gap: 10px;
  }

  .recording {
    animation: pulse 1000ms infinite alternate;
  }

  @keyframes pulse {
    0% {
      border-width: 5px;
    }
    100% {
      border-width: 15px;
    }
  }
}
</style>
@/chat/call
